<template>
    
</template>

<script>
import Vue from "vue";

//轮播图插件 
import VueAwesomeSwiper from "vue-awesome-swiper";
//  需要样式


import { swiper, swiperSlide } from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import "swiper/dist/css/swiper.css";


export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        //   // ...
          autoplay:3000,
          direction : 'vertical',
          grabCursor:true,
          setWrapperSize:true,
          sutoHeight:true,
          pagination: ".swiper-pagination", // // 如果需要分页器
          paginationClickable:true,
           nextButton: ".swiper-button-next",// // 如果需要前进后退按钮
          prevButton: ".swiper-button-prev",
        //    scrollbar: ".swiper-scrollbar", // // 如果需要滚动条
          mousewheelControl:true,
          observeParents:true,
        //如果自行设计了插件，那么插件的一些配置相关的参数，也应该出现在这个对象中，如下
          debugger:true,
          //swiper各种回调函数也可以出现在这个对象夏侯昂，和swiper官方一样
          onTransitionStart(swiper){
              console.log(swiper)
          },
          autoplay: 5000,
          initialSlide: 1,
          pagination:{
            el:".swiper-pagination"
          },
          autoplay:{
            delay:1500,
            disableOnInteraction:false
          },
          loop:true

      },
    
    };
  },
   computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(1, 1000, false)
    },

    // you can find current swiper instance object like this, while the notNextTick property value must be true
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
 
  components: {
    swiper,
    swiperSlide
  }
};
</script>

<style>

</style>
